<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--favicon-->
    <link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
    <!-- loader-->
    <link href="assets/css/pace.min.css" rel="stylesheet" />
    <script src="assets/js/pace.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/css/app.css" rel="stylesheet" />
    <link href="assets/css/icons.css" rel="stylesheet" />
    <title>Dashboard - Change Password</title>
  </head>

  <body class="bg-theme bg-theme1">
    <!-- wrapper -->
    <div class="wrapper">
      <div
        class="authentication-forgot d-flex align-items-center justify-content-center"
      >
        <div class="card forgot-box">
          <div class="card-body">
            <div class="p-4 rounded border">
              <div class="text-center">
                <img
                  src="assets/images/icons/forgot-2.png"
                  width="120"
                  alt=""
                />
              </div>
              <h4 class="mt-5 font-weight-bold">Forgot Password?</h4>
              <p class="">
                Enter your registered email ID to reset the password
              </p>
              <div class="my-4">
                <label class="form-label">Email id</label>
                <input
                  type="text"
                  class="form-control form-control-lg"
                  placeholder="example@user.com"
                />
              </div>
              <div class="d-grid gap-2">
                <button type="button" class="btn btn-light btn-lg">Send</button>
                <a
                  href="authentication-signin.html"
                  class="btn btn-light btn-lg"
                  ><i class="bx bx-arrow-back me-1"></i>Back to Login</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end wrapper -->
    <!--start switcher-->
    <div class="switcher-wrapper">
      <div class="switcher-btn"><i class="bx bx-cog bx-spin"></i></div>
      <div class="switcher-body">
        <div class="d-flex align-items-center">
          <h5 class="mb-0 text-uppercase">Theme Customizer</h5>
          <button
            type="button"
            class="btn-close ms-auto close-switcher"
            aria-label="Close"
          ></button>
        </div>
        <hr />
        <p class="mb-0">Gaussian Texture</p>
        <hr />
        <ul class="switcher">
          <li id="theme1"></li>
          <li id="theme2"></li>
          <li id="theme3"></li>
          <li id="theme4"></li>
          <li id="theme5"></li>
          <li id="theme6"></li>
        </ul>
        <hr />
        <p class="mb-0">Gradient Background</p>
        <hr />
        <ul class="switcher">
          <li id="theme7"></li>
          <li id="theme8"></li>
          <li id="theme9"></li>
          <li id="theme10"></li>
          <li id="theme11"></li>
          <li id="theme12"></li>
          <li id="theme13"></li>
          <li id="theme14"></li>
          <li id="theme15"></li>
        </ul>
      </div>
    </div>
    <!--end switcher-->

    <!--plugins-->
    <script src="assets/js/jquery.min.js"></script>

    <script>
      $(".switcher-btn").on("click", function () {
        $(".switcher-wrapper").toggleClass("switcher-toggled");
      }),
        $(".close-switcher").on("click", function () {
          $(".switcher-wrapper").removeClass("switcher-toggled");
        }),
        $("#theme1").click(theme1);
      $("#theme2").click(theme2);
      $("#theme3").click(theme3);
      $("#theme4").click(theme4);
      $("#theme5").click(theme5);
      $("#theme6").click(theme6);
      $("#theme7").click(theme7);
      $("#theme8").click(theme8);
      $("#theme9").click(theme9);
      $("#theme10").click(theme10);
      $("#theme11").click(theme11);
      $("#theme12").click(theme12);
      $("#theme13").click(theme13);
      $("#theme14").click(theme14);
      $("#theme15").click(theme15);

      function theme1() {
        $("body").attr("class", "bg-theme bg-theme1");
      }

      function theme2() {
        $("body").attr("class", "bg-theme bg-theme2");
      }

      function theme3() {
        $("body").attr("class", "bg-theme bg-theme3");
      }

      function theme4() {
        $("body").attr("class", "bg-theme bg-theme4");
      }

      function theme5() {
        $("body").attr("class", "bg-theme bg-theme5");
      }

      function theme6() {
        $("body").attr("class", "bg-theme bg-theme6");
      }

      function theme7() {
        $("body").attr("class", "bg-theme bg-theme7");
      }

      function theme8() {
        $("body").attr("class", "bg-theme bg-theme8");
      }

      function theme9() {
        $("body").attr("class", "bg-theme bg-theme9");
      }

      function theme10() {
        $("body").attr("class", "bg-theme bg-theme10");
      }

      function theme11() {
        $("body").attr("class", "bg-theme bg-theme11");
      }

      function theme12() {
        $("body").attr("class", "bg-theme bg-theme12");
      }

      function theme13() {
        $("body").attr("class", "bg-theme bg-theme13");
      }

      function theme14() {
        $("body").attr("class", "bg-theme bg-theme14");
      }

      function theme15() {
        $("body").attr("class", "bg-theme bg-theme15");
      }
    </script>
  </body>
</html>
